<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :before-close="crud.cancelCU"
    :visible="crud.status.cu > 0"
    :title="crud.status.title"
    width="1100px"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="small"
      label-width="80px"
    >
      <el-form-item label="KEY" style="display: inline-block;" prop="formKey">
        <el-input v-model="form.formKey" style="width: 380px;" />
      </el-form-item>
      <el-form-item label="名称" style="display: inline-block;" prop="formName">
        <el-input v-model="form.formName" style="width: 380px;" />
      </el-form-item>
      <el-form-item label="表单" prop="formContent">
        <fm-making-form
          ref="makingform"
          name="formContent"
          style="height: 500px; display: block; width: 970px"
          clearable
          preview
          generate-json
          generate-code
        >
          <template slot="action">
            <el-button
              type="text"
              icon="el-icon-upload"
              size="medium"
              @click="save"
            >保存</el-button>
          </template>
        </fm-making-form>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="crud.cancelCU">取消</el-button>
      <el-button
        :loading="crud.status.cu === 2"
        type="primary"
        @click="crud.submitCU"
      >确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CRUD, { form } from '@crud/crud'

const defaultForm = { id: null, formName: null, formContent: JSON.stringify({ 'list': [], 'config': { 'labelWidth': 100, 'labelPosition': 'right', 'size': 'small' }}) }
export default {
  mixins: [form(defaultForm)],
  data() {
    return {
      rules: {
        formKey: [
          { required: true, message: '请输入表单KEY', trigger: 'blur' }
        ],
        formName: [
          { required: true, message: '请输入表单名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    save() {
      this.form.formContent = JSON.stringify(this.$refs.makingform.getJSON())
    },
    // 打开新增弹窗前做的操作
    [CRUD.HOOK.beforeToAdd](crud, form) {
      setTimeout(() => {
        this.$refs.makingform.setJSON(JSON.parse(form.formContent))
      }, 0)
    },
    // 打开编辑弹窗前做的操作
    [CRUD.HOOK.beforeToEdit](crud, form) {
      // DOM渲染完毕后再进行获取this.$refs，或者使用setTimeout。nextTick和setTimeout两者回调执行的前提条件不相同
      this.$nextTick(() => {
        if (this.form.formContent) {
          this.$refs.makingform.setJSON(JSON.parse(form.formContent))
        } else {
          this.$refs.makingform.setJSON({ 'list': [], 'config': { 'labelWidth': 100, 'labelPosition': 'right', 'size': 'small' }})
        }
      })
    },
    // 提交之前
    [CRUD.HOOK.beforeSubmit](crud, form) {
      this.form.formContent = JSON.stringify(this.$refs.makingform.getJSON())
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
.fm2-main {
  height: 100px;
}
.el-container {
  height: 100px;
}
</style>
<style rel="stylesheet/scss" lang="scss">
.fm2-main {
  height: 100%;
}
aside {
  background: #ffffff;
  padding: 0px;
}
</style>
